import { Component, OnInit, ElementRef, ViewChild, Injector } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ServiceProxy, WarnInfoDTO } from '@shared/service-proxy/service-proxies';
import esri = __esri;
import { loadModules } from 'esri-loader';
import {AppConsts} from "@shared/AppConsts";

@Component({
  selector: 'app-warn-address-list-modal',
  templateUrl: './warn-address-list-modal.component.html',
  styleUrls: ['./warn-address-list-modal.component.less']
})
export class WarnAddressListModalComponent extends AppComponentBase implements OnInit {
  @ViewChild('mapViewNode') private mapViewEl: ElementRef;
  isVisible: boolean = false;
  list: WarnInfoDTO[]=[];
  constructor(injector: Injector,
    private _service: ServiceProxy) {
    super(injector);
  }
  ngOnInit() {
  }

  async initializeMap() {
    try {
      const [
        Map,
        MapView,
        ScaleBar,
        TileLayer,
        Graphic] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/ScaleBar',
        'esri/layers/TileLayer',
        "esri/Graphic",
        'dojo/domReady!'
      ], {
        url: AppConsts.arcgisMapUrl,         css: AppConsts.arcgisStyleUrl
      });

      // Set type of map
      const map: esri.Map = new Map({
        // basemap: this._basemap,
        layers: new TileLayer({
          url: AppConsts.arcgisMapServerUrl
        })
      });
      this._center = [this.list[0].postionLng, this.list[0].postionLat];
      const mapView: esri.MapView = new MapView({
        container: this.mapViewEl.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      });

      // All resources in the MapView and the map have loaded.
      // Now execute additional processes
      mapView.when(() => {
        const scaleBar = new ScaleBar({
          view: mapView,
          unit: "dual" // The scale bar displays both metric and non-metric units.
        });
        mapView.ui.add(scaleBar, "bottom-left");

        // Create a symbol for drawing the point
        const lockMarkerSymbol = {
          type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
          url: "/assets/images/icon-location.png",
          width: "25px",
          height: "25px",
          yoffset: "12px"
        };

        const lockPointGraphic: Array<any> = [];
        this.list.map((value, index, array) => {
          const dispathch ={
            containerCode:value.containerCode,
            lockCode:value.lockCode,
            transportCode:value.transportCode,
            msg :value.msg,
            latitude:value.postionLat,
            longitude:value.postionLng,
            warnTime: value.warnTime,
            warnTypeName:value.warnTypeName
          }

          lockPointGraphic[index] = new Graphic({
            geometry: {
              type: "point",  // autocasts as new Point()
              longitude: value.postionLng,
              latitude: value.postionLat
            },
            symbol: lockMarkerSymbol,

            attributes: dispathch,
            popupTemplate: { // autocasts as new PopupTemplate()
              title: "{warnTypeName}",
              content: [{
                type: "fields",
                fieldInfos: [{
                  fieldName: "containerCode",
                  label: this.l("lockset_no")
                }, {
                  fieldName: "lockCode",
                  label: this.l("container_no")
                }, {
                  fieldName: "transportCode",
                  label: this.l("car_no")
                }, {
                  fieldName: "msg",
                  label: this.l("warn_type")
                }, 
                // {
                //   fieldName: "latitude,longitude",
                //   label: this.l("warn_address")
                // }, 
                {
                  fieldName: "warnTime",
                  label: this.l("get_date")
                }]
              }]
            }
          });
        });

        if (this.list.length) {
          mapView.graphics.addMany(lockPointGraphic);
        }
      });


    } catch (error) {
      console.log('We have an error: ' + error);
    }

  }

  show(id: string): void {
    this._service.searchWarnInfosOfDispatchUsingGET(id).subscribe(result => {
      if(result.result&&result.result.length){
        this.list = result.result.filter(m=>m.warnpostion!="0.0,-0.0");
        this.isVisible = true;
        this.initializeMap();
      }
      else{
        this.notification.info(this.l("warn_notification"),this.l("not_recieve_message"));
      }
    })
  }

  close() {
    this.isVisible = false;
  }
}
